<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>
<head>

</head>
<!-- page heading start-->
<div class="page-heading">
    <h3>
        课程添加
    </h3>
    <ul class="breadcrumb">
        <li>
            <a href="#"> 课程添加 </a>
        </li>
        <li class="active"> 课程添加 </li>
    </ul>
</div>
<!-- page heading end-->

<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    Course Addition
                </header>
                <div class="panel-body">
                    <form role="form" class="form-horizontal adminex-form" method="post" action="/course/save" onsubmit="return addCourse();">
<%--                        action="/teacher/addTeacher" method="post"--%>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">课程标题</label>
                            <div class="col-lg-10">
                                <input type="text" placeholder="" id="title" class="form-control"
                                       name="title" >
                                <p class="help-block">E.g. JavaWeb</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 control-label">教师姓名</label>
                            <div class="col-lg-10">
                                <select id="techerId" name="teacherId" class="form-control m-bot15">
                                    <c:forEach items="${teachers}" var="teacher">
                                        <option value="${teacher.id}">${teacher.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>

<%--                    TODO 级联选择框--%>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">科目分类</label>
                            <div class="col-lg-5">
                                <select id="subjectParentId" name="subjectParentId" class="form-control m-bot15" onchange="changeSubject()">
                                    <option value="" selected>选择一级科目</option>
                                    <c:forEach items="${firstSubjects}" var="parent">
                                        <option data-value="${parent.children}" value="${parent.id}">${parent.title}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-lg-5">
                                <select id="subject" name="subjectId" class="m-bot15 form-control">
                                        <option value="">请先选择一级科目</option>
                                </select>
                            </div>
                        </div>


                        <div class="form-group ">
                            <label class="col-lg-2 control-label">课程价格</label>
                            <div class="col-lg-9">
                                <div id="spinner4">
                                    <div class="input-group" style="width:150px;">
                                        <div class="spinner-buttons input-group-btn">
                                            <button type="button" class="btn spinner-up btn-primary">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                        <input type="text" class="spinner-input form-control" maxlength="3" name="price" id="price">
                                        <div class="spinner-buttons input-group-btn">
                                            <button type="button" class="btn spinner-down btn-warning">
                                                <i class="fa fa-minus"></i>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                                <span class="help-block">
                                with step: 5
                             </span>
                            </div>

                        </div>

                        <div class="form-group ">
                            <label class="col-lg-2 control-label">总课时</label>
                            <div class="col-lg-10">
                                <input type="text" placeholder="" id="lessonNum" class="form-control"
                                       name="lessonNum">
                                <p class="help-block">E.g. 99</p>
                            </div>
                        </div>

                  <%--      TODO 富文本编辑器--%>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">课程简介</label>
                            <div class="col-lg-10">
                                <textarea id="description" name="description" class="wysihtml5 form-control" rows="9"></textarea>
                            </div>
                        </div>


<%--                    TODO 课程封面--%>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">课程封面</label>
                            <div class="col-lg-10">
                                <a class="pull-left" href="javascript:void(0)">
                                    <img id="image" class="thumb media-object" src="/images/photos/user1.png" onclick="addfile()" alt="">
                                </a>
                                <input id="imgInput" type="file" style="display: none"/>
                                <input id="imgId" type="text" name="cover" style="display: none">
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-10">
                                <button class="btn btn-primary" type="button" onclick="addCourse()">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
    </div>
</div>
<%--    sysihtml5--%>
<link rel="stylesheet" type="text/css" href="/js/bootstrap-wysihtml5/bootstrap-wysihtml5.css" />
<script type="text/javascript" src="/js/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="/js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>

<!--spinner-->
<script type="text/javascript" src="/js/fuelux/js/spinner.min.js"></script>
<script src="/js/spinner-init.js"></script>
<!--body wrapper end-->
<script>
    jQuery(document).ready(function(){
        $('.wysihtml5').wysihtml5()
    })

    //选择文件后更改图片
    $("#imgInput").change(function(){
        console.log(URL.createObjectURL($(this)[0].files[0]))
        $("#image").attr("src",URL.createObjectURL($(this)[0].files[0]));
    });

    //点击图片使用隐藏的filebutton打开文件选择器
    function addfile(){
        $('#imgInput').click()
    }

    //提交表单弹出提示框
    function addCourse(){
        var formData = new FormData();
        //获取被选择的图片数据
        formData.append("file",$('#imgInput')[0].files[0]);
        //发送图片上传请求到oss接口
        $.ajax({
            type: "post",
            url:'/oss/upload',
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                //将返回的url地址传给cover输入框
                if(data) {
                    $('#imgId').val(data)
                }
                $.ajax({
                    type: 'post',
                    url: '/course/save',
                    data:{
                        title: $("#title").val(),
                        teacherId: $("#techerId").val(),
                        subjectParentId : $("#subjectParentId").val(),
                        subjectId : $('#subject').val(),
                        price: $("#price").val(),
                        lessonNum: $("#lessonNum").val(),
                        description: $('#description').val(),
                        cover   : $('#imgId').val(),
                        sort: 1,
                    },
                    success: function () {
                        toastr.success("课程添加成功!")
                        setTimeout(function (){
                            window.location.href='/course/list'
                        },1000)
                    },
                    error: function () {
                        toastr.error("课程添加失败!")
                        setTimeout(function (){
                            window.location.href='/course/list'
                        },1000)
                    },
                })
                toastr.success("添加成功!")
                return true
            }
        })
    }
    //科目动态级联选择框
    function changeSubject(){
        //获得id值
        var selectedParentId = $('#subjectParentId').val()
        $.ajax({
            url: `/subject/getSecondSubjectsById/` + selectedParentId,
            success: function(data){
                $('#subject').empty()
                for(var i = 0; i < data.length; i++){
                    var subject = data[i]
                    $('#subject').append("<option value='" + subject.id + "'>" + subject.title + "</option>")
                }
            }
        })

    }
</script>
</html>
